<template>
    <div class="root">
        <el-card class="left box-card">
            <div class="search">
                <el-input v-model.trim="context" size="medium" @change="change" placeholder="搜索讨论"></el-input>
                <el-button size="medium" @click="searchForum()">搜索</el-button>
            </div>
        </el-card>
        <div class="mid">
            <router-view :key="$route.fullPath"></router-view>
        </div>
        <el-card class="right box-card">
            <div class="hot">
                <div class="title"><img src="@/assets/remen.png"/>热门讨论</div>
                <div class="con" v-for="(item,index) in hotList" :key="item.id">
                   <div class="i">{{ index+1 }}</div> <div class="t" @click="toinfo(hotList[index])">{{ item.title }}</div>
                </div>
            </div>
            <div class="tui">
                <div class="title"><img src="@/assets/tuijian.png"/>编辑推荐</div>
                <div class="con" @click="toinfo(tuiJianList[index])" v-for="(item,index) in tuiJianList" :key="item.id">
                    <div class="i">{{ index+1 }}</div> <div class="t" @click="toinfo(tuiJianList[index])">{{ item.title }}</div>
                </div>
            </div>
        </el-card>

    </div>
</template>

<script>
import ForumList from "@/views/Index/forum/ForumList";

export default {
    components: {ForumList},
    data() {
        return {
            userinfo:this.$GLOBAL.userinfo,
            context: "",
            hotList: [],
            tuiJianList:[]
        }
    },
    methods: {
        searchForum() {
            if (this.context === '') return;
            console.log(this.context);
            this.$axios.get("/discussion/searchdis/"+this.context,{}).then(res=>{
                let list=res.data.data;
                this.$store.commit('update',list)
                this.context=""
            })
        },
        change(value) {
            this.context = value;
            this.searchForum();
        },
        toinfo(info) {
            // this.$router.push({name: "Forum-info", params: {info}})
            console.log("info",info)
            this.$store.commit("updateInfo",info)
        }
    },
    mounted() {
        //热门
        this.$axios.get("/discussion/topcontent",  {
            headers:{
                "Content-Type":"application/json",
            }
        }).then(res => {
            this.hotList=res.data.data;
            console.log("hot",this.hotList)
        });

        // 推荐
        this.$axios.get("/discussion/recommendcontent",  {
            headers:{
                "Content-Type":"application/json",
            }
        }).then(res => {
            this.tuiJianList=res.data.data.slice(0,5);
            let list=res.data.data;
            // console.log("list",list)
            this.$GLOBAL.tuiJianList=list;
            this.$router.push({name:"ForumList",params:{list}})
        });
    }
}
</script>

<style scoped>
.root {
    display: flex;
}
.el-main{
    text-align: left;
}
.left {
    border-radius: 3%;
    flex: 1;
    height: 300px;
    padding-top: 30px;
}

.left .search .el-input {
    width: 60%;
    margin-right: 20px;
}

.mid {
    flex: 3;
    margin: 0 20px;
}

.right {
    border-radius: 2%;
    flex: 1;
    height: 700px;
}
.right .hot,.tui{
    margin: 50px 0;
}
.right .title{
    display: flex;
    /*justify-content: center;*/
    align-items: center;
    font-size: 25px;
    padding: 10px;
}
.right .title img{
    height: 100%;
    width: 25px;
    margin-right: 10px;
}
.right .con{
    display: flex;
    padding: 5px;
}
.right .con .i{
    flex: 1;
    text-align: center;
}
.right .con .t{
    flex: 3;
}
.right .con .t:hover{
    color: deepskyblue;
}
.right .con:hover{
    background-color: #F5F8FB;
}
</style>
